<html>
<head>
<title>Baha'i Date Calculator</title>
<style>
Input.wide{
  width: 500px;
}
Input.narrow{
  width: 100px;
}
</style>
<!-- <script type="text/javascript" src="jsapi.js"></script>-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="bdatenow.js"></script>
<script type="text/javascript">
//google.load("jquery", "1");

var input1 = null;

onload = Start;

function Start(){

  input1 = document.getElementById('input1');
  longitude = document.getElementById('long');
  latitude = document.getElementById('lat');
  
  input1.value = new Date();
  longitude.value = '-114.138656';
  latitude.value = '51.03835';
  
  ShowDate();
}

function ShowDate(){
  var targetDate = new Date(input1.value);
  var bahaiDate = new BahaiDate(targetDate, longitude.value, latitude.value);
  
  var date1 = document.getElementById('date1');
  var date2 = document.getElementById('date2');

  date1.innerHTML = '<b><u><em>' + bahaiDate.relationToSunset + '</em></u></b>'
					+ '<br/>' + bahaiDate.toStringShort()
					+ '<br/>' + bahaiDate.toNames()
					+ '<br/>' + bahaiDate.toString()
					+ '<br/>' + bahaiDate.toNames('en')
					+ '<br/>' + bahaiDate.toString('en');
					
  date2.innerHTML = targetDate.getFullYear() + '/' + (targetDate.getMonth() + 1) + '/' + targetDate.getDate() + ' at ' + targetDate.getHours() + ':' + targetDate.getMinutes();
  
  input1.focus();
}


</script>
</head>
<body>
<div>Enter Date: <input id="input1" class="wide" onchange="ShowDate()" /> (auto updating)</div>
<div>Longitude: <input id="long" class="narrow" />  Latitude: <input id="lat"  class="narrow"/></div>
<div>Echo: <span id="date2"></span></div>
<div>(Sunset times are calculated when using IE. Not supported in FF or Chrome.)</div>
<div style="font-style:italic; padding-top: 15px; font-weight: bold; text-decoration:underline">Baha'i date:</div> 
<div style="padding-left: 20px;" id="date1"></div>

</body>
</html>